テキストボックス内の数値をボタンで増減する
今回は、テキストボックス内の数値を「＋」と「−」のボタンで増減させる方法を紹介します。注文やアンケートなど、フォームを利用したページで訪問者の操作を助ける機能として活用できるでしょう。今回は、アンケートを例にその活用例を紹介します。

→ フォームを作成する
 
まずは、フォームの作成から始めます。必要な項目についてテキストボックス、「＋」と「−」のボタンを作成してください。このとき、テキストボックスのValue属性には、初めから表示させておく数値を指定しておきます。また、name属性で各テキストボックスに個別の名前を付けておきます。
<FORM>
接客：<INPUT type=text name=q1 value=3 size=4>
<INPUT type=button value="＋">
<INPUT type=button value="−">
<BR>
価格：<INPUT type=text name=q2 value=3 size=4>
<INPUT type=button value="＋">
<INPUT type=button value="−">
<BR>
品質：<INPUT type=text name=q3 value=3 size=4>
<INPUT type=button value="＋">
<INPUT type=button value="−">
</FORM>


→ 数値を増減するJavaScript関数を呼び出す
 
続いて、「＋」または「−」のボタンをクリックした際にJavaScript関数が実行されるようにonClickイベントを追加します。今回の例では、「＋」ボタンをクリックした際に関数「plus()」を、「−」ボタンをクリックした際に関数「minus()」を実行します。各関数の引数には、数値を増減させるテキストボックスを識別できるように、テキストボックスの名前を渡すようにします。
<FORM>
接客：<INPUT type=text name=q1 value=3 size=4>
<INPUT type=button value="＋" onClick="plus(this.form.q1)">
<INPUT type=button value="−" onClick="minus(this.form.q1)">
<BR>
価格：<INPUT type=text name=q2 value=3 size=4>
<INPUT type=button value="＋" onClick="plus(this.form.q2)">
<INPUT type=button value="−" onClick="minus(this.form.q2)">
<BR>
品質：<INPUT type=text name=q3 value=3 size=4>
<INPUT type=button value="＋" onClick="plus(this.form.q3)">
<INPUT type=button value="−" onClick="minus(this.form.q3)">
</FORM>


→ JavaScript関数を自作する
 
あとは、「plus()」と「minus()」の2つのJavaScript関数を自作すればページが完成します。テキストボックス内の数値を1つだけ増加させるには、「（テキストボックスの名前）.value++」を実行します。（テキストボックスの名前）は、引数として関数に渡されるので、今回の例では「chk.value++」でテキストボックスの数値を1つ増加できます。同様に、数値を1つだけ減少させる場合は「chk.value--」を実行します。なお、今回の例では、数値を1〜5の間に限定するため、各関数にif文を追加し、数値が6以上または0以下にならないように処理しています。
<SCRIPT language="JavaScript">
<!--
function plus(chk){
chk.value++;
if (chk.value==6) {chk.value=5}
}
function minus(chk){
chk.value--;
if (chk.value==0) {chk.value=1}
}
// -->
</SCRIPT>


G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I